<template>
    <div class="softPaper">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">{{softPaper.name}}</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
            <div @click="showCode" slot="right"><img slot="icon" src="~assets/x3/ico/icon-code.png" class="go-back"></div>
        </x-header>
        <div class="softPaper__ad">
            <div v-html="softPaper.content"></div>
        </div>

        <!-- <div class="pro_block">
            <div class="bg">
                <div class="biaoti">
                    <div class="biaotisekuai">&nbsp;</div>

                    <div class="biaotitext">
                        <span style="color:#F0FFF0;">
                            <span microsoft="" yahei="">恒华出行宝 {{softPaper.productName}}</span>
                        </span>
                    </div>
                </div>

                <div class="neirongbg">
                    <div v-for="(item,key) in softPaper.desc" class="neirong1">{{item}}</div>

                </div>

                <div class="anniubg">
                    <div @click="goDetail()" class="anniutext anniutextfix">点击立享超值保障 ￥ {{softPaper.minPrice}} 起</div>
                </div>
            </div>
        </div> -->
        <!-- <div v-show="!isScroBtn" @click="goDetail()" class="softPaper-add">点击立享超值保障 ￥ {{softPaper.minPrice}} 起</div> -->
        <!-- <u-edit v-model="softPaper.softPaperDiv"></u-edit> -->

        <div class="insure__footer">
            <div class="insure__leftbtn">¥
                <span>{{softPaper.minPrice}} &nbsp起</span>
            </div>
            <div @click="goDetail()" class="insure__rightbtn">立即投保</div>
        </div>

        <x-dialog v-model="isShowShare" class="share-Einv" hide-on-blur>
            <div class="share-div">
                <qrcode class="share-qrcode" :value="shopShareUrl" type="img"></qrcode>
                <p>长按识别二维码</p>
            </div>
        </x-dialog>

    </div>
</template>

<script>
import { RequestUrl } from "src/common/url";
// import "vue-quill-editor";
// import uEdit from "src/common/editor/Quilleditor";
import SharePage from "src/js/sharePage"; //引入微信分享js
import { mapState } from 'vuex';
import { Loading, TransferDomDirective as TransferDom, XHeader, XDialog, Qrcode } from 'vux';
import { Mutations, RouteUrl, Url_Key } from 'src/common/const';
export default {
    computed: mapState([
        'popState',
        'isLoading',
        'footerShow',
        'region',
        'softPaper',
        "isWeChar",
        "isQuerySoftPaper",
        "shareUuid",
        "user",
        "isInitData",
        "isWeAuth",
        "saveInsure"
    ]),
    data() {
        return {
            id: "",
            isScroBtn: false,
            shopShareUrl: "",
            isShowShare: false,
        }
    },
    components: {
        XHeader,
        // uEdit
        XDialog,
        Qrcode
    },
    beforeRouteEnter(to, from, next) {
        next();
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["SOFT_PAPER_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
        // if (sessionStorage["ACTIVITY_FORM_URL"] == "/") {
        //     this.$common.goUrl(this, RouteUrl.INDEX);
        // }
        if (!this.isInitData) {
            this.$common.storeCommit(this, Mutations.GET_IP_BAIDU_REGION, this);
        }
        this.initURIParameters();

    },
    watch: {
        isInitData(cur, old) {
            if (cur && this.isQuerySoftPaper) {
                this.initShare();
                // this.initShare();
            }
        },
        isQuerySoftPaper(cur, old) {
            if (cur && this.isQuerySoftPaper) {
                this.initShare();
            }
        }
    },
    methods: {
        showCode() {
            this.$common.saveShare("二维码", this, 3);
            this.isShowShare = true;
        },
        goDetail() {
            let parmList = [];
            // let urlParm = {
            //   key: Url_Key.SHARE_UUID,
            //   value: this.shareUuid
            // }
            let urlPro = {
                key: Url_Key.PRODUCT_ID,
                value: this.softPaper.productId
            }
            parmList.push(urlPro);
            // parmList.push(urlParm);


            // let shareUrl = RequestUrl.BASE_URL + RouteUrl.DETAILS + this.$common.setShareUrl(parmList);
            //组合URI并跳转
            this.$common.goUrl(this, RouteUrl.DETAILS, this.$common.setShareUrl(parmList));
        },
        initURIParameters() {
            if (!this.isQuerySoftPaper) {
                let _this = this;
                let url = window.location.href;;
                //解码URI--------------decodeURI不能完全解码,必须使用decodeURIComponent
                // url = decodeURIComponent(url);
                // let uuid = _this.$common.getShareUrlKey(url, Url_Key.SHARE_UUID);
                let id = _this.$common.getShareUrlKey(url, Url_Key.SOFT_PAPER);
                if (!_this.$common.isEmpty(id) || !_this.$common.isEmpty(localStorage["SOFT_PAPER_ID"])) {
                    if (_this.$common.isEmpty(id)) {
                        id = localStorage["SOFT_PAPER_ID"];
                    }
                    this.id = id;
                    let data = {
                        _this: this,
                        id: id,
                        type: "share"
                    }
                    this.$common.storeCommit(this, Mutations.SET_SOFT_PAPER, data);//loading   
                } else {
                    _this.$common.goUrl(_this, RouteUrl.INDEX);
                }
            }
        },
        goBack() {
            if (localStorage["SOFT_PAPER_FORM_URL"] == RouteUrl.DETAILS) {
                this.$common.goBackUrl(this, RouteUrl.MARKETING_SOFT_PAPER);
            } else {
                this.$common.goBack(this);
            }
        },
        initShare() {
            if (!this.$common.isEmpty(this.softPaper.id)) {
                localStorage["SOFT_PAPER_ID"] = this.softPaper.id;
            }
            let _this = this;
            let parmList = [];
            let uuid = "";
            if (this.$common.isNotEmpty(this.saveInsure.refShareUUid) && (this.saveInsure.refereeData.storeFlag == "1" || this.saveInsure.refereeData.storeFlag == 1)) {
                sessionStorage["SHARE_COMMON_TYPE"] = "REF";
                uuid = this.saveInsure.refShareUUid;
            } else {
                sessionStorage["SHARE_COMMON_TYPE"] = "USER";
                if (this.user.isLogin) {
                    uuid = this.$encode.hex_md5(this.user.userDto.userCode + ":1");
                    this.$common.storeCommit(this, Mutations.SET_SHARE_UUID, uuid);
                }
                uuid = this.shareUuid;
            }


            let urlParm = {
                key: Url_Key.SHARE_UUID,
                value: uuid
            }
            let urlPro = {
                key: Url_Key.SOFT_PAPER,
                value: this.softPaper.id
            }
            parmList.push(urlPro);
            parmList.push(urlParm);
            document.title = this.softPaper.name;

            let shareUrl = RequestUrl.BASE_URL + RouteUrl.SOFT_PAPER + this.$common.setShareUrl(parmList);


            this.shopShareUrl = shareUrl;

            let imgUrl = this.softPaper.imgUrl;
            if (imgUrl.indexOf("http://") < 0 && imgUrl.indexOf("https://") < 0) {
                //补全产品的图片路径
                imgUrl = RequestUrl.WEB_PATH + imgUrl;
            }

            let weChatData = {
                _this: this,
                shareData: {
                    title: this.softPaper.name,
                    desc: this.softPaper.summaryInfo,
                    imgUrl: imgUrl,
                    url: shareUrl,
                    _this: this,
                    type: 4
                }
            };
            // 微信分享
            SharePage.weChatShare(weChatData);
        }
    },
    mounted() {
        sessionStorage["DETAILS_FORM_URL"] = RouteUrl.SOFT_PAPER;
        let _this = this;
        document.title = this.softPaper.name;
        this.$init.subPageInit(this);
        if (this.isInitData && this.isQuerySoftPaper) {
            this.initShare();
            // _this.initShare();
        }
        // $(".softPaper").scroll(function () {
        //     alert(1);
        //     var $this = $(this),
        //         viewH = $(this).height(),//可见高度
        //         contentH = $(this).get(0).scrollHeight,//内容高度
        //         scrollTop = $(this).scrollTop();//滚动高度
        //     if (scrollTop / (contentH - viewH) >= 0.95) {
        //         alert(1);
        //     }
        // });
        // console.log($(document).scrollTop());
        // console.log($(document).height());
        // console.log(window.screen.height);
        // console.log($(document).height());
        // if($(document).height() == $(document).height()){
        // if ($(document).height() == window.screen.height) {
        //     _this.isScroBtn = true;
        // }
        // // }
        // $(window).scroll(function () {
        //     var scrollTop = $(this).scrollTop();
        //     var scrollHeight = $(document).height();
        //     var windowHeight = $(this).height();
        //     // console.log(scrollTop);
        //     // console.log(windowHeight);
        //     // console.log(scrollHeight);
        //     if (scrollHeight - (scrollTop + windowHeight) < 80) {
        //         _this.isScroBtn = true;
        //     } else {
        //         _this.isScroBtn = false;

        //     }
        // });
    }
}
</script>

<style lang="scss">
.home__views--view {
  height: 100%;
  width: 100%;
}

.home__views {
  // margin-bottom: 53px;
  width: 100%;
  height: 100%;
}

.softPaper__ad {
  padding: 10px 3px 70px 3px;
  //   padding-left: 5px;
  //   padding-right: 5px;
  //   padding-bottom: 70px;
  //   padding-top: 10px;
  //   text-indent: 2em;
  font-size: 10px;
  //   padding: 10px; // height: 100vh;
  background: #fff;
  word-wrap: break-word;
  border-top: 1px solid #e7e7e7;
  img {
    width: 100%;
  }
}

.ql-align-center {
  strong {
    text-indent: 0em;
    text-align: center;
    display: block;
  }
}
.softPaper-add {
  //   background-color: rgba(242, 138, 138, 0.3);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.37rem;
  background-color: rgba(60, 57, 243, 0.3);
  box-shadow: 0 -1px 1px #C8161D;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  // font-family: 'Helvetica Neue',Helvetica,'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial;
  font-weight: bold;
  font-size: 17px;
  color: #C8161D;
  line-height: 35px;
  //   line-height: 35px;
  height: 35px;
}

.bg {
  width: 92%;
  height: 100%;
  background-color: #ea4040;
  padding-top: 2%;
  padding-left: 4%;
  padding-right: 4%;
  padding-bottom: 4%;
  border-radius: 4px;
}
.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
.insure__leftbtn {
  float: left;
  width: 35%;
  background: #fff;
  color: #C8161D;
  span {
    color: #f6690a;
  }
}

.biaoti {
  height: 19px;
  display: block;
  margin-top: 3%;
}
.biaotisekuai {
  width: 4px;
  margin-top: 0.8%;
  height: 14px;
  background-color: white;
  float: left;
}
.biaotitext {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial;
  font-weight: bold;
  font-size: 16px;
  color: white;
  margin-left: 5px;
  text-align: center;
  line-height: 19px;
  float: left;
}

.neirongbg {
  display: block;
  background-color: #f28a8a;
  margin-top: 4%;
  padding-left: 3%;
  padding-right: 3%;
  padding-top: 4%;
  padding-bottom: 4%;
  overflow: hidden;
  border-radius: 2px;
}
.neirong1 {
  padding: 5px 0px;
  color: white;
  font-size: 13px;
  float: left;
  width: 50%;
  line-height: 13px;
  display: block;
}
.insure__rightbtn {
  background: #C8161D;
  color: #fff;
}
.anniubg {
  //   height: ;
  display: block;
  background-color: #fff5fa;
  margin-top: 4%;
  font-size: 14px;
  border-radius: 2px;
}
.anniutext {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial;
  font-weight: bold;
  font-size: 17px;
  color: red;
  line-height: 45px;
  line-height: 35px;
}
.anniutext.anniutextfix {
  background-color: rgba(242, 138, 138, 0.3);
}
</style>
